import React, {PropTypes} from 'react'
import {Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button} from 'antd';
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import {get,update} from '../../actions/example'
import {Card} from 'antd';
const contextTypes = {
    router: PropTypes.object.isRequired,
    store: PropTypes.object.isRequired
};
const FormItem = Form.Item;
const Option = Select.Option;
const residences = [{
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [{
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [{
            value: 'xihu',
            label: 'West Lake',
        }],
    }],
}, {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [{
        value: 'nanjing',
        label: 'Nanjing',
        children: [{
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
        }],
    }],
}];


import './index.less'

class FormView extends React.Component {
    constructor() {
        super()
    }

    componentWillMount() {
        console.log(this.props.params.id);

        if(this.props.params.id == 'add'){

        }else{
            this.props.get(this.context.router.params.id);
        }
        
    }

    callback() {

    }

    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                this.props.update(values);
            }
        });
    }

    handlePasswordBlur(e) {
        const value = e.target.value;
        this.setState({passwordDirty: this.state.passwordDirty || !!value});
    }


    checkPassowrd(rule, value, callback) {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('password')) {
            callback('Two passwords that you enter is inconsistent!');
        } else {
            callback();
        }
    }

    checkConfirm(rule, value, callback) {
        // const form = this.props.form;
        // if (value) {
        //     form.validateFields(['confirm'], {force: true});
        // }
        callback();
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 14},
        };
        const tailFormItemLayout = {
            wrapperCol: {
                span: 14,
                offset: 6,
            },
        };
        // const prefixSelector = getFieldDecorator('prefix', {
        //     initialValue: '86',
        // })(
        //     <Select className="icp-selector">
        //         <Option value="86">+86</Option>
        //     </Select>
        // );
        return (
          
            <Card>


            <Form horizontal onSubmit={this.handleSubmit.bind(this)}>
                    <FormItem wrapperCol={{ span: 12, offset: 6 }}>
          <Button type="primary" htmlType="submit">Submit</Button>
        </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="exampleId"
                    >
                        {getFieldDecorator('exampleId', {
                            rules: [{
                                 message: 'The input is not valid E-mail!',
                            }, {
                                 message: 'Please input your E-mail!',
                            }],
                        })(
                            <Input />
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="ExampleName"
                    >
                        {getFieldDecorator('exampleName', {
                            rules: [{
                                required: true, message: 'Please input your password!',
                            }, {
                                validator: this.checkConfirm.bind(this),
                            }],
                        })(
                            <Input/>
                        )}
                    </FormItem>
                     <FormItem
                        {...formItemLayout}
                        label="E-mail"
                    >
                        {getFieldDecorator('exampleEmail', {
                            rules: [{
                                type: 'email', message: 'The input is not valid E-mail!',
                            }, {
                                required: true, message: 'Please input your E-mail!',
                            }],
                        })(
                            <Input />
                        )}
                    </FormItem>
                </Form>
            </Card>
        )
    }
}

FormView.contextTypes = contextTypes;

FormView = Form.create({
    mapPropsToFields:function (props){
        console.log(props);
        if(!props.data){
            return {};
        }
        return { 
            exampleId : {value : props.data.exampleId},
            exampleName : {value : props.data.exampleName},
            exampleEmail: {value : props.data.exampleEmail}
        }
    },
    onFieldsChange(props, fields) {
        console.log('onFieldsChange', fields);
      
  }
})(FormView);

function mapStateToProps(state) {
    return {
        data: state.example.data
    }
}

function mapDispatchToProps(dispatch) {
    return {
        get: bindActionCreators(get, dispatch),
        update : bindActionCreators(update,dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(FormView)
